<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is="sui-header">
        Reveal
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-reveal animated="fade">
        <sui-reveal-content visible>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/wireframes/square-image.png" size="small"/>
        </sui-reveal-content>
        <sui-reveal-content hidden>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/chris.jpg" size="small"/>
        </sui-reveal-content>
      </sui-reveal>
      <sui-divider/>
      <sui-reveal animated="move">
        <sui-reveal-content visible>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/wireframes/square-image.png" size="small"/>
        </sui-reveal-content>
        <sui-reveal-content hidden>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/chris.jpg" size="small"/>
        </sui-reveal-content>
      </sui-reveal>
      <sui-reveal animated="move up">
        <sui-reveal-content visible>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/wireframes/square-image.png" size="small"/>
        </sui-reveal-content>
        <sui-reveal-content hidden>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/chris.jpg" size="small"/>
        </sui-reveal-content>
      </sui-reveal>
      <sui-reveal animated="move right">
        <sui-reveal-content visible>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/wireframes/square-image.png" size="small"/>
        </sui-reveal-content>
        <sui-reveal-content hidden>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/chris.jpg" size="small"/>
        </sui-reveal-content>
      </sui-reveal>
      <sui-reveal animated="move down">
        <sui-reveal-content visible>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/wireframes/square-image.png" size="small"/>
        </sui-reveal-content>
        <sui-reveal-content hidden>
          <sui-image src="https://semantic-ui-vue.github.io/static/images/avatar/large/chris.jpg" size="small"/>
        </sui-reveal-content>
      </sui-reveal>
      <sui-divider/>
      <sui-reveal animated="rotate">
        <sui-reveal-content visible>
          <sui-image circular src="https://semantic-ui-vue.github.io/static/images/wireframes/square-image.png"
                     size="small"/>
        </sui-reveal-content>
        <sui-reveal-content hidden>
          <sui-image circular src="https://semantic-ui-vue.github.io/static/images/avatar/large/chris.jpg"
                     size="small"/>
        </sui-reveal-content>
      </sui-reveal>
      <sui-reveal animated="rotate left">
        <sui-reveal-content visible>
          <sui-image circular src="https://semantic-ui-vue.github.io/static/images/wireframes/square-image.png"
                     size="small"/>
        </sui-reveal-content>
        <sui-reveal-content hidden>
          <sui-image circular src="https://semantic-ui-vue.github.io/static/images/avatar/large/chris.jpg"
                     size="small"/>
        </sui-reveal-content>
      </sui-reveal>
    </sui-container>
  </div>
</template>

<script>
export default {
  name: 'Reveal'
}
</script>

<style scoped>

</style>
